JavaScript Module Federation Plugin-arkitektur: Bygga ett dynamiskt pluginsystem

I dagens komplexa landskap för webbutveckling är det avgörande att bygga modulära, skalbara och underhållbara applikationer. En kraftfull teknik för att uppnå detta är genom en plugin-arkitektur, där funktionalitet delas upp i oberoende, dynamiskt laddade moduler. JavaScript Module Federation, en funktion i Webpack 5, erbjuder en robust mekanism för att implementera sådana arkitekturer. Denna artikel fördjupar sig i detaljerna kring att använda Module Federation för att bygga ett dynamiskt pluginsystem.

Vad är Module Federation?

Module Federation gör det möjligt för JavaScript-applikationer att dynamiskt dela kod vid körtid. Det innebär att en modul (en bit kod) från en applikation kan användas direkt av en annan applikation, utan att behöva byggas om eller driftsättas på nytt. Detta uppnås genom att exponera och konsumera moduler över olika byggen och till och med olika driftsättningar.

Traditionella metoder för koddelning, såsom npm-paket, kräver att konsumerande applikationer byggs om och driftsätts på nytt varje gång ett delat beroende uppdateras. Module Federation eliminerar detta overhead, vilket gör det idealiskt för scenarier där frekventa uppdateringar och oberoende driftsättningar krävs.

Varför använda Module Federation för plugin-arkitekturer?

Module Federation erbjuder flera fördelar när man bygger plugin-arkitekturer:

• Dynamisk modulladdning: Plugins kan laddas in och ut vid körtid, vilket gör att applikationer kan anpassa sig till ändrade krav utan att en fullständig omdistribuering krävs.
• Frikoppling: Plugins utvecklas och driftsätts oberoende av varandra, vilket minskar beroenden mellan olika delar av applikationen.
• Skalbarhet: Applikationen kan enkelt utökas med nya plugins utan att påverka befintlig funktionalitet.
• Underhållbarhet: Plugins kan uppdateras och underhållas oberoende, vilket minskar risken för att introducera buggar i kärnapplikationen.
• Kodåteranvändning: Plugins kan återanvändas över flera applikationer, vilket främjar konsekvens och minskar utvecklingsinsatsen.
• Versionering och återställningar: Du kan hantera olika versioner av plugins och enkelt återgå till tidigare versioner vid behov.

Kärnkoncept: Värd- och fjärrcontainrar

Module Federation kretsar kring två nyckelkoncept:

• Värdcontainer (Host Container): Huvudapplikationen som konsumerar fjärrmodulerna (plugins).
• Fjärrcontainer (Remote Container): Applikationen som exponerar moduler (plugins) för att konsumeras av värden.

Värdcontainern hämtar dynamiskt remote entry-filen från fjärrcontainern, vilken innehåller ett manifest över exponerade moduler. Värden kan sedan komma åt och använda dessa moduler som om de vore en del av dess egen kodbas.

Implementera ett dynamiskt pluginsystem med Module Federation: En steg-för-steg-guide

Låt oss gå igenom processen för att bygga ett enkelt pluginsystem med Module Federation. Vi kommer att skapa en värdapplikation och en fjärr-plugin-applikation.

1. Konfigurera värdapplikationen (Värdcontainer)

Skapa först en ny projektmapp och initiera ett nytt npm-projekt:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Installera Webpack och dess beroenden:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Skapa en `webpack.config.js`-fil i `host-app`-mappen med följande konfiguration:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        'plugin': 'Plugin@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Förklaring:

• `name`: Namnet på värdapplikationen.
• `remotes`: Definierar de fjärrcontainrar som värden kommer att konsumera. I det här fallet konsumerar den en fjärrcontainer vid namn `plugin` från `http://localhost:3001/remoteEntry.js`. `Plugin@`-syntaxen innebär att fjärrmodulens ModuleFederationPlugin `name` är 'Plugin'.
• `shared`: Listar de beroenden som delas mellan värd- och fjärrcontainrarna. Detta förhindrar att dubbletter av dessa beroenden laddas. Att använda `shared` är avgörande för att undvika fel och säkerställa korrekt plugin-funktionalitet.

Skapa en `src`-mapp och lägg till en `index.js`-fil med följande innehåll:

            import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

const PluginComponent = React.lazy(() => import('plugin/PluginComponent'));

const App = () => {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading Plugin...</div>}>
        <PluginComponent />
      </Suspense>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

            

              
                Copy
              
            
          

Förklaring:

• Vi använder `React.lazy` för att dynamiskt importera `PluginComponent` från `plugin`-fjärrmodulen. Detta är avgörande för att latladda pluginet och undvika initiala laddningsfördröjningar.
• `Suspense`-komponenten används för att hantera laddningsläget medan pluginet hämtas.

Skapa en `public`-mapp och lägg till en `index.html`-fil med följande innehåll:

            <!DOCTYPE html>
<html>
<head>
  <title>Host Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Lägg till en Babel-konfigurationsfil `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Uppdatera din `package.json` med ett start-skript:

            {
  "name": "host-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

2. Konfigurera fjärrapplikationen (Plugin-container)

Skapa en ny projektmapp för pluginet:

            mkdir plugin-app
cd plugin-app
npm init -y
            

              
                Copy
              
            
          

Installera Webpack och dess beroenden:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Skapa en `webpack.config.js`-fil i `plugin-app`-mappen med följande konfiguration:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3001,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Plugin',
      filename: 'remoteEntry.js',
      exposes: {
        './PluginComponent': './src/PluginComponent',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Förklaring:

• `name`: Namnet på fjärrcontainern (plugin). Detta måste matcha namnet som används i värdens `remotes`-konfiguration.
• `filename`: Namnet på remote entry-filen som värden kommer att hämta.
• `exposes`: Definierar de moduler som exponeras av fjärrcontainern. I det här fallet exponerar vi modulen `PluginComponent`. Nyckeln './PluginComponent' används i värdens import-sats (t.ex. `import('plugin/PluginComponent')`).
• `shared`: Samma som för värden, listar de delade beroendena. Det är avgörande att de delade beroendena och deras versioner är kompatibla mellan värden och fjärrmodulen.

Skapa en `src`-mapp och lägg till en `PluginComponent.jsx`-fil med följande innehåll:

            import React from 'react';

const PluginComponent = () => {
  return (
    <div style={{border: '1px solid blue', padding: '10px'}}>
      <h2>Plugin Component</h2>
      <p>This is a dynamically loaded plugin!</p>
    </div>
  );
};

export default PluginComponent;

            

              
                Copy
              
            
          

Skapa en `index.js`-fil i `src`-mappen för att exportera PluginComponent:

            import PluginComponent from './PluginComponent';

export default PluginComponent;
            

              
                Copy
              
            
          

Skapa en `public`-mapp och lägg till en `index.html`-fil med följande innehåll:

            <!DOCTYPE html>
<html>
<head>
  <title>Plugin Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Lägg till en Babel-konfigurationsfil `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Uppdatera din `package.json` med ett start-skript:

            {
  "name": "plugin-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

3. Köra applikationerna

Starta både värd- och plugin-applikationerna genom att köra `npm start` i deras respektive mappar.

Navigera till `http://localhost:3000` i din webbläsare. Du bör se värdapplikationen med den dynamiskt laddade plugin-komponenten.

Avancerade funktioner och överväganden

Versionering och återställningar

Module Federation stöder versionering, vilket gör att du kan hantera olika versioner av plugins. Du kan specificera versionskrav i värdens `remotes`-konfiguration. Till exempel:

            remotes: {
  'plugin': 'Plugin@http://localhost:3001/remoteEntry.js@1.0.0',
}
            

              
                Copy
              
            
          

Detta talar om för värden att använda version 1.0.0 av pluginet. Om en nyare version finns tillgänglig kommer värden att fortsätta använda den specificerade versionen tills den uttryckligen uppdateras. Att implementera robust versionering är avgörande för att förhindra brytande ändringar och säkerställa applikationens stabilitet.

Säkerhetsaspekter

När du använder Module Federation är säkerheten av största vikt. Tänk på följande:

• Autentisering och auktorisering: Implementera korrekta mekanismer för autentisering och auktorisering för att säkerställa att endast behöriga användare kan komma åt och använda plugins.
• Kodintegritet: Verifiera integriteten hos fjärrmodulerna för att förhindra att skadlig kod injiceras i applikationen. Överväg att använda Content Security Policy (CSP) för att begränsa källorna från vilka applikationen kan ladda resurser.
• Beroendehantering: Hantera noggrant beroenden för både värd- och fjärrcontainrarna för att undvika sårbarheter. Uppdatera regelbundet beroenden till de senaste versionerna.
• Indatavalidering: Validera all data som tas emot från fjärrmoduler för att förhindra injektionsattacker.
• CORS (Cross-Origin Resource Sharing): Konfigurera CORS korrekt för att tillåta värdapplikationen att komma åt remote entry-filen från plugin-applikationen.

Plugin-upptäckt och -hantering

För mer komplexa pluginsystem kan du behöva en mekanism för att upptäcka och hantera plugins. Detta kan uppnås genom ett plugin-register eller en upptäcktstjänst. Ett centralt register kan lagra information om tillgängliga plugins, inklusive deras plats, version och beroenden. Värdapplikationen kan sedan fråga registret för att hitta och ladda lämpliga plugins.

Överväg dessa tillvägagångssätt:

• Centraliserad konfiguration: Lagra plugin-URL:er i en central konfigurationsfil (t.ex. en JSON-fil) som värdapplikationen läser vid körtid. Detta gör att du enkelt kan lägga till, ta bort eller uppdatera plugins utan att driftsätta om värdapplikationen.
• API-baserad upptäckt: Skapa en API-slutpunkt som returnerar en lista över tillgängliga plugins. Värdapplikationen kan sedan hämta denna lista och dynamiskt ladda plugins.
• Händelsedriven arkitektur: Använd en händelsebuss eller meddelandekö för att meddela värdapplikationen när nya plugins blir tillgängliga. Detta möjliggör asynkron plugin-upptäckt och -laddning.

Dynamisk konfiguration och plugin-aktivering

Att tillåta användare att dynamiskt konfigurera och aktivera plugins är en kraftfull funktion. Detta kräver en mekanism för att lagra och hantera plugin-konfigurationer. Du kan använda en databas, en konfigurationsfil eller en molnbaserad konfigurationstjänst för att lagra plugin-inställningar. Värdapplikationen kan sedan läsa dessa inställningar vid körtid och aktivera plugins därefter. Överväg att tillhandahålla ett användargränssnitt för att hantera plugin-konfigurationer.

Hantering av asynkrona operationer och felhantering

När du arbetar med dynamiskt laddade plugins är det viktigt att hantera asynkrona operationer och fel på ett elegant sätt. Använd `async/await` eller Promises för att hantera asynkron kod. Implementera korrekt felhantering för att fånga och logga eventuella fel som uppstår under laddning eller exekvering av plugin. Ge informativa felmeddelanden till användaren. Överväg att använda en centraliserad fel-loggningstjänst för att spåra fel över alla plugins.

Koddelning och prestandaoptimering

För att optimera prestandan, använd koddelning (code splitting) för att bryta ner applikationen och plugins i mindre bitar. Detta gör att webbläsaren endast behöver ladda ner den kod som behövs för en viss sida eller funktion. Webpack har inbyggt stöd för koddelning. Överväg att använda latladdning (lazy loading) för att ladda plugins endast när de behövs. Minifiera och komprimera koden för att minska filstorleken.

Testning och kontinuerlig integration

Testa ditt pluginsystem noggrant för att säkerställa att det fungerar korrekt. Skriv enhetstester, integrationstester och end-to-end-tester. Använd ett system för kontinuerlig integration (CI) för att automatiskt köra tester varje gång koden ändras. Implementera en pipeline för kontinuerlig leverans (CD) för att automatisera driftsättningen av applikationen och plugins.

Verkliga exempel och användningsfall

Module Federation används i en mängd verkliga applikationer, inklusive:

• E-handelsplattformar: Dynamisk laddning av produktrekommendationer, betalningsgateways och fraktleverantörer. Till exempel kan en global e-handelsplattform använda Module Federation för att integrera olika betalningsleverantörer baserat på kundens plats. I Nordamerika kan den ladda ett plugin för Stripe, medan den i Europa kan ladda ett plugin för PayPal eller Klarna.
• Content Management Systems (CMS): Tillåter användare att installera och aktivera plugins för att utöka funktionaliteten i CMS:et. Ett CMS kan tillåta användare att installera plugins för SEO-optimering, sociala medier-integration eller innehållsanalys.
• Dashboards och analysplattformar: Dynamisk laddning av olika widgets och visualiseringar. En global analysplattform kan ladda plugins för olika datakällor, såsom Google Analytics, Adobe Analytics eller Salesforce.
• Mikrofrontend-arkitekturer: Bygga storskaliga webbapplikationer som en samling av oberoende driftsättbara mikrofrontends. Ett stort företag kan använda Module Federation för att bygga sin webbapplikation som en samling av mikrofrontends, var och en ansvarig för en specifik affärsfunktion, såsom kontohantering, produktkatalog eller orderhantering.
• Designsystem: Dela UI-komponenter och design-tokens över flera applikationer. En global organisation med flera varumärken kan använda Module Federation för att dela ett gemensamt designsystem över alla sina applikationer, vilket säkerställer konsekvens och minskar utvecklingsinsatsen.

Bästa praxis för att bygga dynamiska pluginsystem med Module Federation

Här är några bästa praxis att tänka på när du bygger dynamiska pluginsystem med Module Federation:

• Håll plugins små och fokuserade: Varje plugin bör vara ansvarig för en specifik del av funktionaliteten. Detta gör det lättare att underhålla och uppdatera plugins.
• Definiera tydliga plugin-gränssnitt: Definiera tydliga gränssnitt för hur plugins interagerar med värdapplikationen. Detta säkerställer att plugins är kompatibla med värden och förhindrar brytande ändringar.
• Använd semantisk versionering: Använd semantisk versionering för att hantera versionerna av dina plugins. Detta gör det lättare att spåra ändringar och säkerställa kompatibilitet.
• Tillhandahåll dokumentation: Tillhandahåll tydlig och koncis dokumentation för dina plugins. Detta hjälper användare att förstå hur man installerar, konfigurerar och använder plugins.
• Implementera säkerhetsbästa praxis: Följ bästa praxis för säkerhet för att skydda din applikation och plugins från sårbarheter.
• Övervaka plugin-prestanda: Övervaka prestandan för dina plugins för att identifiera eventuella flaskhalsar. Optimera koden för att förbättra prestandan.
• Automatisera driftsättning: Automatisera driftsättningen av din applikation och plugins. Detta minskar risken för fel och säkerställer att uppdateringar distribueras snabbt.
• Använd en konsekvent kodstil: Upprätthåll en konsekvent kodstil över alla plugins. Detta gör koden lättare att läsa och underhålla.
• Skriv enhetstester: Skriv enhetstester för dina plugins för att säkerställa att de fungerar korrekt.
• Använd en linter: Använd en linter för att automatiskt kontrollera din kod för fel.

Slutsats

JavaScript Module Federation erbjuder en kraftfull och flexibel mekanism för att bygga dynamiska pluginsystem. Genom att utnyttja Module Federation kan du skapa modulära, skalbara och underhållbara applikationer som kan anpassa sig till ändrade krav. Genom att följa de bästa praxis som beskrivs i denna artikel kan du bygga robusta och säkra pluginsystem som uppfyller din organisations behov.

Denna teknik är särskilt värdefull i internationella sammanhang, då den gör det möjligt för företag att skräddarsy sina mjukvaruerbjudanden för specifika regioner eller kundsegment utan att behöva driftsätta helt separata applikationer. Från att integrera lokala betalningsgateways till att leverera regionspecifikt innehåll, underlättar Module Federation en mer personlig och effektiv användarupplevelse globalt.